<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/react/react.development.js"></script>
    <script src="/static/js/react/react-dom.development.js"></script>
    <script src="/static/js/react/babel.min.js"></script>
    <script src="/static/js/ant/dist/antd.js"></script>
    <link href="/static/js/ant/dist/antd.css" rel="stylesheet">


    <style>
        .layout-content {
            padding: 0 24px 24px;
        }
        .layout-content-bread {
            margin: 16px 0;
        }
        .site-layout-background {
            background: #fff;
            padding: 24px;
            margin: 0;
            min-height: 80vh;
        }
        #components-layout-demo-top-side-2 .logo {
            float: left;
            width: 120px;
            height: 31px;
            margin: 16px 24px 16px 0;
            background: rgba(255, 255, 255, 0.3);
        }

        .ant-row-rtl #components-layout-demo-top-side-2 .logo {
            float: right;
            margin: 16px 0 16px 24px;
        }
        .menu{
            height: 100%;
        }
        .title{
            color: #0e4980;

        }
    </style>
</head>
<body>
<div>


    <div id="domeReact">

    </div>


</div>



<script type="text/babel">

    class routerBox extends React.Component{
        onClick = () => {
            alert("hahaha")
        }
        render = () => {
            return (<div><h1 onClick={this.onClick}>Hello word</h1></div>)
        }
    }

ReactDOM.render(
        <div>
            <antd.Layout>
                <antd.Layout.Header  className="header">
                    <div className="logo">
                        {{loud name}}

                    </div>

                </antd.Layout.Header>
            </antd.Layout>
            <antd.Layout>
                <antd.Layout.Sider width={200} className={"site-layout-background"}>
                    <antd.Menu
                        mode="inline"
                        defaultSelectedKeys="1"
                        defaultOpenKeys={['sub1']}
                        className={"menu"}
                    >
                        <antd.Menu.SubMenu key={"sub1"}  title={"系统管理"}>
                            <antd.Menu.Item  key="1">用户管理</antd.Menu.Item>
                            <antd.Menu.Item key="2">角色管理</antd.Menu.Item>
                            <antd.Menu.Item key="3">菜单管理</antd.Menu.Item>
                            <antd.Menu.Item key="4">系统参数</antd.Menu.Item>
                        </antd.Menu.SubMenu>

                    </antd.Menu>

                </antd.Layout.Sider>
                <antd.Layout className={"layout-content"}>
                    <antd.Breadcrumb className={"layout-content-bread"}>
                        <antd.Breadcrumb.Item>Home</antd.Breadcrumb.Item>
                        <antd.Breadcrumb.Item>List</antd.Breadcrumb.Item>
                        <antd.Breadcrumb.Item>App</antd.Breadcrumb.Item>
                    </antd.Breadcrumb>
                    <antd.Layout.Content className="site-layout-background">
                        <div  id="context"></div>
                    </antd.Layout.Content>
                </antd.Layout>

            </antd.Layout>


        </div>
        , document.getElementById('domeReact'));



ReactDOM.render(
    <routerBox/>
        ,document.getElementById("context")
)

</script>
</body>

</html>